/*
  学习目标：
  需求1：✅准备数据、渲染评论列表
  需求2：✅根据id，删除一条数据
  需求3：实现发布评论 - 受控组件改造
  需求4：实现发布评论
  需求5：实现清除评论功能
*/

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';
import './index.css';

class Handler extends React.Component {
  state = {
    list: [
      {
        id: 1,
        username: '王思聪',
        content:
          '想你的夜想你的夜想你的夜想你的夜想你的夜想你的夜想你的夜想你的夜',
      },
      {
        id: 2,
        username: '马云',
        content:
          '我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王健林',
        content:
          '实现一个小目标实现一个小目标实现一个小目标实现一个小目标实现一个小目标实现一个小目标实现一个小目标',
      },
    ],
  };
  // 定义一个删除方法，接受ID
  handleClickDel = (id) => {
    console.log('id----->', id);
    // 方法里面把数据过滤掉，注意这里不要改变到原数组
    this.setState(
      {
        list: this.state.list.filter((item) => item.id !== id),
      },
      () => {
        // 在回调函数中打印查看更新后的状态
        console.log('this.state.list----->', this.state.list);
      }
    );
  };

  // 定义一个方法并且绑定，方法里阻止表单默认提交事件
  // 把数据新增到list,为空时提醒，否则我们不让发布
  // 发布新增评论之后清空表单数据
  handleSubmit = (event) => {
    // console.log('123----->', 123);
    // 阻止表单默认提交事件
    event.preventDefault();
    // 判断内容为空提示弹窗
    if (!this.state.username.trim() || !this.state.content.trim()) {
      alert('评论人和内容不能为空');
      return;
    }
    // 把数据新增到list
    // 新值覆盖就值，通过扩展运算符拼接
    const newList = [
      {
        id: Date.now(),
        username: this.state.username,
        content: this.state.content,
      },
      ...this.state.list,
    ];
    // 更新视图
    // 把数据新增到list
    this.setState({
      list: newList,
      // 新增完成后清空数据
      username: '',
      content: '',
    });
  };
  // 修改状态
  handleChange = (e) => {
    // console.log('e.target----->87', e.target);
    const { name, value } = e.target;
    // 1.4.对象的键名插值定义，复用一个handleChange
    this.setState({
      [name]: value,
    });
  };
  // 给清空评论注册事件
  // 通过setState清空评论列表
  handleClear = () => {
    // 把list设为空数据
    this.setState({
      list: [],
    });
  };
  render() {
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form>
          <input
            className="user"
            type="text"
            placeholder="请输入评论人"
            // 1.1state控制表单的value或者checked
            value={this.state.username}
            // 1.2.onChange事件配合setState修改状态
            onChange={this.handleChange}
            // 1.3.设置name
            name="username"
          />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            name="content"
            value={this.state.content}
            onChange={this.handleChange}
            placeholder="请输入评论内容"
          />
          <br />
          <button onClick={this.handleSubmit}>发表评论</button>
          <button type="button" onClick={this.handleClear}>
            清空评论
          </button>
        </form>
        <ul>
          {/* 使用length做条件渲染，如果有数据显示数据，否则暂无数据 */}
          {this.state.list.length ? (
            this.state.list.map((item) => {
              return (
                <li key={item.id}>
                  <h3>评论人: {item.username}</h3>
                  <p>评论内容：{item.content}</p>
                  {/* 绑定事件，并且传递ID */}
                  <button
                    onClick={() => {
                      this.handleClickDel(item.id);
                    }}
                  >
                    删除
                  </button>
                </li>
              );
            })
          ) : (
            <div>暂无数据</div>
          )}
        </ul>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
